<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>摇色子</title>
		<style type="text/css">
			#id1{
				width: 200px;
				height: 200px;
				margin: 50px auto;
				text-align: center;
			}
			#id2{
				width: 111px;
				height: 113px;
				margin: 50px auto;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="id1">
			<select id="selid">
				<option value ="">选择大小</option>
				<option value ="big">大</option>
				<option value ="small">小</option>
			</select>
		<div id="id2">
			<img src='img/摇色子/1.jpg' id="imgid1">
		</div>
			<button type="button" onclick="btnbegin();">开始</button>
		</div>
	</body>
	<script type="text/javascript">
		function btnbegin(){
			var imgid1 = document.getElementById('imgid1');
			var selid = document.getElementById('selid').value
			if(selid== ''){
				alert('请选择大小');
				location.reload();
			}
			var num = 0 ;
			var i = 0;
			var Interval = setInterval(function(){
				num = getnum();
				imgid1.src = 'img/摇色子/'+num+'.jpg';
				i++;
				if(i == 15){
					clearInterval(Interval);
					setTimeout(function(){
						if(selid == 'big'){
							if(num > 3){
								alert('对咯！')
							}else{
								alert('错咯！')
							}
						}
						if(selid == 'small'){
							if(num < 3){
								alert('对咯！')
							}else{
								alert('错咯！')
							}
						}
					},100)
				}
			},200);
		}
		function getnum(){
			var num = 0;
			while(true){
				num = Math.floor(Math.random()*10);
				if(num != 0 && num < 7){
					break;
				}
			}
			return num;
		}
	</script>
</html>